<<{extend name="cigoadmin@public:editor"/}>>
<<{block name="head-bottom"}>>
<style type="text/css">
    body {
        padding: 10px 15px;
    }
</style>
<<{/block}>>
<<{block name="title-tool-bar"}>><<{/block}>>

<<{block name="content"}>>
<div id="form" style="max-height: 410px;overflow-y: scroll;margin-bottom: 10px;">
</div>

<div class="form-group btn-group pull-right">
    <a id="uploadBtn" class="btn btn-success btn-default" href="#" onclick="return false;">
        上&nbsp;&nbsp;传
    </a>
    <a id="cancelBtn" class="btn btn-warning btn-default" href="#" onclick="return false;">
        取&nbsp;&nbsp;消
    </a>
</div>
<<{/block}>>

<<{block name="js-footer"}>>
<script type="text/javascript">
    var layerUiId = '';
    var layerIndex = -1;//当前layer索引
    var pImgUploadConfigBindView; //父界面图片上传配置参数绑定控件
    var imgUploadConfig;
    var notifyUploadCallbackFunc;//回调通知上传函数

    $(function () {
        initEvents();
    });

    function initEvents() {
        $('#cancelBtn').click(function () {
            parent.cigoLayer.close(layerIndex);
            return false;
        });
        $('#uploadBtn').click(function () {
            if (!makeImgUploadConfig()) {
                return false;
            }
            notifyUploadCallbackFunc();
            parent.cigoLayer.close(layerIndex);

            return false;
        });
    }

    function makeImgUploadConfig() {
        //根据配置初始化界面
        if ('thumb' in imgUploadConfig) {
            if (!makeImgUploadThumbConfig()) {
                return false;
            }
            //删除crop
            delete imgUploadConfig.crop;
        } else if ('crop' in imgUploadConfig) {
            if (!makeImgUploadCropConfig()) {
                return false;
            }
        }
        if ('water' in imgUploadConfig) {
            if (!makeImgUploadWaterConfig()) {
                return false;
            }
        }
        if ('text' in imgUploadConfig) {
            if (!makeImgUploadTextConfig()) {
                return false;
            }
        }

        //绑定并保存新配置数据
        if ('thumb' in imgUploadConfig) {
            pImgUploadConfigBindView.attr('cigo-edit-img-thumb-config', JSON.stringify(imgUploadConfig.thumb));
            pImgUploadConfigBindView.removeAttr('cigo-edit-img-ctrltype-crop');
            pImgUploadConfigBindView.removeAttr('cigo-edit-img-crop-config');
        } else if ('crop' in imgUploadConfig) {
            pImgUploadConfigBindView.attr('cigo-edit-img-crop-config', JSON.stringify(imgUploadConfig.crop));
        } else {
            pImgUploadConfigBindView.removeAttr('cigo-edit-img-ctrltype-thumb');
            pImgUploadConfigBindView.removeAttr('cigo-edit-img-thumb-config');
            pImgUploadConfigBindView.removeAttr('cigo-edit-img-ctrltype-crop');
            pImgUploadConfigBindView.removeAttr('cigo-edit-img-crop-config');
        }
        if ('water' in imgUploadConfig) {
            pImgUploadConfigBindView.attr('cigo-edit-img-water-config', JSON.stringify(imgUploadConfig.water));
        } else {
            pImgUploadConfigBindView.removeAttr('cigo-edit-img-ctrltype-water');
            pImgUploadConfigBindView.removeAttr('cigo-edit-img-water-config');
        }
        if ('text' in imgUploadConfig) {
            pImgUploadConfigBindView.attr('cigo-edit-img-text-config', JSON.stringify(imgUploadConfig.text));
        } else {
            pImgUploadConfigBindView.removeAttr('cigo-edit-img-ctrltype-text');
            pImgUploadConfigBindView.removeAttr('cigo-edit-img-text-config');
        }

        return true;
    }

    function makeImgUploadThumbConfig() {
        //获取配置参数
        var configNode = $('#thumb');
        var width = configNode.find('input[name="width"]:first').val();
        var height = configNode.find('input[name="height"]:first').val();
        var type = configNode.find('select[name="type"]:first').select2('data');
        //检查必填项目
        if (
            (undefined === width || '' === width) ||
            (undefined === height || '' === height)
        ) {
            cigoLayer.msg('宽度和高度不能为空！', {icon: 5});
            return false;
        }
        //修改上传配置参数
        imgUploadConfig.thumb = {
            'ctrlTypeFlag': 'thumb',
            'width': width,
            'height': height
        };
        (undefined !== type && '' !== type && type.length > 0)
            ? imgUploadConfig.thumb.type = type[0].id
            : delete imgUploadConfig.thumb.type;

        return true;
    }

    function makeImgUploadCropConfig() {
        //获取配置参数
        var configNode = $('#crop');
        var w = configNode.find('input[name="w"]:first').val();
        var h = configNode.find('input[name="h"]:first').val();
        var x = configNode.find('input[name="x"]:first').val();
        var y = configNode.find('input[name="y"]:first').val();
        var width = configNode.find('input[name="width"]:first').val();
        var height = configNode.find('input[name="height"]:first').val();
        //检查必填项目
        if (
            (undefined === w || '' === w) ||
            (undefined === h || '' === h) ||
            (undefined === x || '' === x) ||
            (undefined === y || '' === y)
        ) {
            cigoLayer.msg('参数（截图宽度、截图高度、起点x坐标、起点y坐标）不能为空！', {icon: 5});
            return false;
        }
        //修改上传配置参数
        imgUploadConfig.crop = {
            'ctrlTypeFlag': 'crop',
            'w': w,
            'h': h,
            'x': x,
            'y': y
        };
        if (
            (undefined !== width && '' !== width) &&
            (undefined !== height && '' !== height)
        ) {
            imgUploadConfig.crop.width = width;
            imgUploadConfig.crop.height = height;
        } else {
            delete imgUploadConfig.crop.width;
            delete imgUploadConfig.crop.height;
        }
        return true;
    }

    function makeImgUploadWaterConfig() {
        //获取配置参数
        var configNode = $('#water');
        var alpha = configNode.find('input[name="alpha"]:first').val();
        var locate = configNode.find('select[name="locate"]:first').select2('data');
        //修改上传配置参数
        imgUploadConfig.water.ctrlTypeFlag = 'water';
        (undefined !== alpha && '' !== alpha)
            ? imgUploadConfig.water.alpha = alpha
            : delete imgUploadConfig.text.alpha;
        (undefined !== locate && '' !== locate && locate.length > 0)
            ? imgUploadConfig.water.locate = locate[0].id
            : delete imgUploadConfig.text.locate;

        return true;
    }

    function makeImgUploadTextConfig() {
        //获取配置参数
        var configNode = $('#text');
        var text = configNode.find('input[name="text"]:first').val();
        var locate = configNode.find('select[name="locate"]:first').select2('data');
        var size = configNode.find('input[name="size"]:first').val();
        var color = configNode.find('input[name="color"]:first').val();
        var offset = configNode.find('input[name="offset"]:first').val();
        var angle = configNode.find('input[name="angle"]:first').val();
        //修改上传配置参数
        imgUploadConfig.text.ctrlTypeFlag = 'text';
        (undefined !== text && '' !== text)
            ? imgUploadConfig.text.text = text
            : delete imgUploadConfig.text.text;
        (undefined !== locate && '' !== locate && locate.length > 0)
            ? imgUploadConfig.text.locate = locate[0].id
            : delete imgUploadConfig.text.locate;
        (undefined !== size && '' !== size)
            ? imgUploadConfig.text.size = size
            : delete imgUploadConfig.text.size;
        (undefined !== color && '' !== color)
            ? imgUploadConfig.text.color = color
            : delete imgUploadConfig.text.color;
        (undefined !== offset && '' !== offset)
            ? imgUploadConfig.text.offset = offset
            : delete imgUploadConfig.text.offset;
        (undefined !== angle && '' !== angle)
            ? imgUploadConfig.text.angle = angle
            : delete imgUploadConfig.text.angle;

        return true;
    }

    function initData(layerId, index, bindConfigView, upArgs, uploadCallbackFunc) {
        layerUiId = layerId;
        layerIndex = index;
        pImgUploadConfigBindView = bindConfigView;
        imgUploadConfig = upArgs;
        notifyUploadCallbackFunc = uploadCallbackFunc;

        //创建界面
        createConfigView();
        parent.cigoLayer.iframeAuto(layerIndex);
        var node = $('#' + layerUiId, window.parent.document);
        node.height(node.height() + 23);
        parent.windowResize();
    }

    function createConfigView() {
        //清空配置区域
        $('#form').empty();
        //根据配置初始化界面
        ('thumb' in imgUploadConfig) ? createThumbConfigView() : (
            ('crop' in imgUploadConfig) ? createCropConfigView() : false
        );
        ('water' in imgUploadConfig) ? createWaterConfigView() : false;
        ('text' in imgUploadConfig) ? createTextConfigView() : false;
        //判断是否无配置项
        if ('' === $('#form').html()) {
            $('#form').html(
                '<div class="alert alert-warning" role="alert">未设置图片操作项！</div>'
            );
        } else {
            cigoEditInit($('#form'));
        }
    }

    function createThumbConfigView() {
        $('#form').append(
            '<div id="thumb" class="panel panel-primary">' +
            '   <div class="panel-heading">缩略图配置</div>' +
            '   <div class="panel-body">' +
            '       <div class="form-group cigo-edit item-input pull-left" style="width: 33%;" cigo-edit-label="<span class=\'glyphicon glyphicon-asterisk\' style=\'color:#a94442;\'>&nbsp;</span>宽度" cigo-edit-type="text" ' +
            '           cigo-edit-class="form-control" cigo-edit-style="width:90%;" ' +
            '           cigo-edit-value="' + ((('width' in imgUploadConfig.thumb) && ('' !== imgUploadConfig.thumb.width)) ? imgUploadConfig.thumb.width : '') + '" ' +
            '           cigo-edit-name="width" cigo-edit-placeholder="请输入宽度..."></div>' +
            '       <div class="form-group cigo-edit item-input pull-left" style="width: 33%;" cigo-edit-label="<span class=\'glyphicon glyphicon-asterisk\' style=\'color:#a94442;\'>&nbsp;</span>高度" cigo-edit-type="text" ' +
            '           cigo-edit-class="form-control" cigo-edit-style="width:90%;" ' +
            '           cigo-edit-value="' + ((('height' in imgUploadConfig.thumb) && ('' !== imgUploadConfig.thumb.height)) ? imgUploadConfig.thumb.height : '') + '" ' +
            '           cigo-edit-name="height" cigo-edit-placeholder="请输入高度..."></div>' +
            '       <div class="cigo-edit item-select pull-left" style="width: 33%;" cigo-edit-label="缩略图类型" ' +
            '           cigo-edit-name="type" cigo-edit-data-select-options=' + makeThumbTypeList() + ' cigo-edit-select-width="200" ' +
            '           cigo-edit-value="' + ((('type' in imgUploadConfig.thumb) && ('' !== imgUploadConfig.thumb.type)) ? imgUploadConfig.thumb.type : '1') + '" ' +
            '           cigo-edit-fun-createitem="selectItemThumbType"></div>' +
            '   </div>' +
            '</div>'
        );
    }

    function makeThumbTypeList() {
        var configList = [
            {"id": 1, "text": "等比例缩放", "tip": "IMAGE_THUMB_SCALE：标识缩略图等比例缩放"},
            {"id": 2, "text": "缩放后填充", "tip": "IMAGE_THUMB_FILLED：标识缩略图缩放后填充"},
            {"id": 3, "text": "居中裁剪", "tip": "IMAGE_THUMB_CENTER：标识缩略图居中裁剪"},
            {"id": 4, "text": "左上角裁剪", "tip": "IMAGE_THUMB_NORTHWEST：标识缩略图左上角裁剪"},
            {"id": 5, "text": "右下角裁剪", "tip": "IMAGE_THUMB_SOUTHEAST：标识缩略图右下角裁剪"},
            {"id": 6, "text": "固定尺寸缩放", "tip": "IMAGE_THUMB_FIXED：标识缩略图固定尺寸缩放"}
        ];
        return JSON.stringify(configList);
    }

    function selectItemThumbType(item) {
        return $(
            '<span title="' + item.tip + '">' + item.text + '</span>'
        );
    }

    function createCropConfigView() {
        $('#form').append(
            '<div id="crop" class="panel panel-primary">' +
            '   <div class="panel-heading">截图配置</div>' +
            '   <div class="panel-body">' +
            '       <div class="form-group cigo-edit item-input pull-left" style="width: 25%;" cigo-edit-label="<span class=\'glyphicon glyphicon-asterisk\' style=\'color:#a94442;\'>&nbsp;</span>截图宽度" cigo-edit-type="text" ' +
            '           cigo-edit-class="form-control" cigo-edit-style="width:90%;" ' +
            '           cigo-edit-value="' + ((('w' in imgUploadConfig.crop) && ('' !== imgUploadConfig.crop.w)) ? imgUploadConfig.crop.w : '') + '" ' +
            '           cigo-edit-name="w" cigo-edit-placeholder="请输入截图宽度..."></div>' +
            '       <div class="form-group cigo-edit item-input pull-left" style="width: 25%;" cigo-edit-label="<span class=\'glyphicon glyphicon-asterisk\' style=\'color:#a94442;\'>&nbsp;</span>截图高度" cigo-edit-type="text" ' +
            '           cigo-edit-class="form-control" cigo-edit-style="width:90%;" ' +
            '           cigo-edit-value="' + ((('h' in imgUploadConfig.crop) && ('' !== imgUploadConfig.crop.h)) ? imgUploadConfig.crop.h : '') + '" ' +
            '           cigo-edit-name="h" cigo-edit-placeholder="请输入截图高度..."></div>' +
            '       <div class="form-group cigo-edit item-input pull-left" style="width: 25%;" cigo-edit-label="<span class=\'glyphicon glyphicon-asterisk\' style=\'color:#a94442;\'>&nbsp;</span>起始x坐标" cigo-edit-type="text" ' +
            '           cigo-edit-class="form-control" cigo-edit-style="width:90%;" ' +
            '           cigo-edit-value="' + ((('x' in imgUploadConfig.crop) && ('' !== imgUploadConfig.crop.x)) ? imgUploadConfig.crop.x : '0') + '" ' +
            '           cigo-edit-name="x" cigo-edit-placeholder="请输入截图起始x坐标..."></div>' +
            '       <div class="form-group cigo-edit item-input pull-left" style="width: 25%;" cigo-edit-label="<span class=\'glyphicon glyphicon-asterisk\' style=\'color:#a94442;\'>&nbsp;</span>起始y坐标" cigo-edit-type="text" ' +
            '           cigo-edit-class="form-control" cigo-edit-style="width:90%;" ' +
            '           cigo-edit-value="' + ((('y' in imgUploadConfig.crop) && ('' !== imgUploadConfig.crop.y)) ? imgUploadConfig.crop.y : '0') + '" ' +
            '           cigo-edit-name="y" cigo-edit-placeholder="请输入截图起始y坐标..."></div>' +
            '       <div class="cigo-edit item-radio pull-left" style="width: 25%;" cigo-edit-type="landscape" cigo-edit-name="enableThumb" cigo-edit-label="修改保存尺寸？" ' +
            '           cigo-edit-value="' + ((('width' in imgUploadConfig.crop) && ('' !== imgUploadConfig.crop.width) && ('height' in imgUploadConfig.crop) && ('' !== imgUploadConfig.crop.height)) ? '1' : '0') + '" ' +
            '           cigo-edit-fun-value-changed="cropIfEnableThumbChanged" cigo-edit-data-radio-options=' + makeCropIfEnableThumbConfig() + '></div>' +
            '       <div id="cropThumb" class="form-group pull-left" style="width: 75%;"></div>' +
            '   </div>' +
            '</div>'
        );
    }

    function makeCropIfEnableThumbConfig() {
        var configList = [
            {'id': '0', 'text': '不修改'},
            {'id': '1', 'text': '修改'}
        ];
        return JSON.stringify(configList);
    }

    function cropIfEnableThumbChanged(value) {
        $('#cropThumb').empty();
        if ((undefined !== value) && '1' === value) {
            $('#cropThumb').html(
                '<div class="cigo-edit item-input pull-left" style="width: 50%;" cigo-edit-label="保存宽度" cigo-edit-type="text" ' +
                '   cigo-edit-class="form-control" cigo-edit-style="width:90%;" ' +
                '   cigo-edit-value="' + ((('width' in imgUploadConfig.crop) && ('' !== imgUploadConfig.crop.width)) ? imgUploadConfig.crop.width : '') + '" ' +
                '   cigo-edit-name="width" cigo-edit-placeholder="请输入保存宽度..."></div>' +
                '<div class="cigo-edit item-input pull-left" style="width: 50%;" cigo-edit-label="保存高度" cigo-edit-type="text" ' +
                '   cigo-edit-class="form-control" cigo-edit-style="width:90%;" ' +
                '   cigo-edit-value="' + ((('height' in imgUploadConfig.crop) && ('' !== imgUploadConfig.crop.height)) ? imgUploadConfig.crop.height : '') + '" ' +
                '   cigo-edit-name="height" cigo-edit-placeholder="请输入保存高度..."></div>'
            );

            //刷新保存尺寸视图
            cigoEditInit($('#cropThumb'));
        }
    }

    function createWaterConfigView() {
        $('#form').append(
            '<div id="water" class="panel panel-primary">' +
            '   <div class="panel-heading">图片水印配置</div>' +
            '   <div class="panel-body">' +
            '       <div class="form-group cigo-edit item-input pull-left" style="width: 50%;" cigo-edit-label="透明度" cigo-edit-type="text" ' +
            '           cigo-edit-class="form-control" cigo-edit-style="width:90%;" ' +
            '           cigo-edit-value="' + ((('alpha' in imgUploadConfig.water) && ('' !== imgUploadConfig.water.alpha)) ? imgUploadConfig.water.alpha : '') + '" ' +
            '           cigo-edit-name="alpha" cigo-edit-placeholder="不填为非透明..."></div>' +
            '       <div class="cigo-edit item-select pull-left" style="width: 50%; margin-top: 28px;" cigo-edit-label="水印位置" ' +
            '           cigo-edit-name="locate" cigo-edit-data-select-options=' + makeWaterLocateList() + ' cigo-edit-select-width="200" ' +
            '           cigo-edit-value="' + ((('locate' in imgUploadConfig.water) && ('' !== imgUploadConfig.water.locate)) ? imgUploadConfig.water.locate : '1') + '" ' +
            '           cigo-edit-fun-createitem="selectItemWaterLocate"></div>' +
            '   </div>' +
            '</div>'
        );
    }

    function makeWaterLocateList() {
        var configList = [
            {"id": 1, "text": "标识左上角水印", "tip": "IMAGE_WATER_NORTHWEST：标识左上角水印"},
            {"id": 2, "text": "标识上居中水印", "tip": "IMAGE_WATER_NORTH：标识上居中水印"},
            {"id": 3, "text": "标识右上角水印", "tip": "IMAGE_WATER_NORTHEAST：标识右上角水印"},
            {"id": 4, "text": "标识左居中水印", "tip": "IMAGE_WATER_WEST：标识左居中水印"},
            {"id": 5, "text": "标识居中水印", "tip": "IMAGE_WATER_CENTER：标识居中水印"},
            {"id": 6, "text": "标识右居中水印", "tip": "IMAGE_WATER_EAST：标识右居中水印"},
            {"id": 7, "text": "标识左下角水印", "tip": "IMAGE_WATER_SOUTHWEST：标识左下角水印"},
            {"id": 8, "text": "标识下居中水印", "tip": "IMAGE_WATER_SOUTH：标识下居中水印"},
            {"id": 9, "text": "标识右下角水印", "tip": "IMAGE_WATER_SOUTHEAST：标识右下角水印"}
        ];
        return JSON.stringify(configList);
    }

    function selectItemWaterLocate(item) {
        return $(
            '<span title="' + item.tip + '">' + item.text + '</span>'
        );
    }

    function createTextConfigView() {
        $('#form').append(
            '<div id="text" class="panel panel-primary">' +
            '   <div class="panel-heading">文字水印配置</div>' +
            '   <div class="panel-body">' +
            '       <div class="form-group cigo-edit item-input pull-left" style="width: 50%;" cigo-edit-label="水印文字" cigo-edit-type="text" ' +
            '           cigo-edit-class="form-control" cigo-edit-style="width:90%;" ' +
            '           cigo-edit-value="' + ((('text' in imgUploadConfig.text) && ('' !== imgUploadConfig.text.text)) ? imgUploadConfig.text.text : '') + '" ' +
            '           cigo-edit-name="text" cigo-edit-placeholder="不填将显示系统默认配置水印文字..."></div>' +
            '       <div class="cigo-edit item-select pull-left" style="width: 50%;clear: right; margin-top: 28px;" cigo-edit-label="水印位置" ' +
            '           cigo-edit-name="locate" cigo-edit-data-select-options=' + makeWaterLocateList() + ' cigo-edit-select-width="200" ' +
            '           cigo-edit-value="' + ((('locate' in imgUploadConfig.text) && ('' !== imgUploadConfig.text.locate)) ? imgUploadConfig.text.locate : '1') + '" ' +
            '           cigo-edit-fun-createitem="selectItemWaterLocate"></div>' +
            '       <div class="form-group cigo-edit item-input pull-left" style="width: 25%;clear: left;" cigo-edit-label="字体大小" cigo-edit-type="text" ' +
            '           cigo-edit-class="form-control" cigo-edit-style="width:90%;" ' +
            '           cigo-edit-value="' + ((('size' in imgUploadConfig.text) && ('' !== imgUploadConfig.text.size)) ? imgUploadConfig.text.size : '') + '" ' +
            '           cigo-edit-name="size" cigo-edit-placeholder="请输入字体大小..."></div>' +
            '       <div class="form-group cigo-edit item-input pull-left" style="width: 25%;" cigo-edit-label="字体颜色" cigo-edit-type="text" ' +
            '           cigo-edit-class="form-control" cigo-edit-style="width:90%;" ' +
            '           cigo-edit-value="' + ((('color' in imgUploadConfig.text) && ('' !== imgUploadConfig.text.color)) ? imgUploadConfig.text.color : '') + '" ' +
            '           cigo-edit-name="color" cigo-edit-placeholder="请输入字体颜色..."></div>' +
            '       <div class="form-group cigo-edit item-input pull-left" style="width: 25%;" cigo-edit-label="水印位移" cigo-edit-type="text" ' +
            '           cigo-edit-class="form-control" cigo-edit-style="width:90%;" ' +
            '           cigo-edit-value="' + ((('offset' in imgUploadConfig.text) && ('' !== imgUploadConfig.text.offset)) ? imgUploadConfig.text.offset : '') + '" ' +
            '           cigo-edit-name="offset" cigo-edit-placeholder="请输入水印相对位移..."></div>' +
            '       <div class="form-group cigo-edit item-input pull-left" style="width: 25%;" cigo-edit-label="倾斜角度" cigo-edit-type="text" ' +
            '           cigo-edit-class="form-control" cigo-edit-style="width:90%;" ' +
            '           cigo-edit-value="' + ((('angle' in imgUploadConfig.text) && ('' !== imgUploadConfig.text.angle)) ? imgUploadConfig.text.angle : '') + '" ' +
            '           cigo-edit-name="angle" cigo-edit-placeholder="请输入倾斜角度..."></div>' +
            '   </div>' +
            '</div>'
        );
    }
</script>
<<{/block}>>
